<template>
  <div class="header-container">
    <div class="l-content">
      <el-button type="primary" circle @click="isColl" :icon="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="tab in tabList" :key="tab.path" :to="{ path: tab.path }">{{ tab.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <Div class="r-content">
      <el-dropdown  @command="handleClick">
        <span class="el-dropdown-link"><el-avatar> user </el-avatar></span>
        <el-dropdown-menu slot="dropdown"  >
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>个人设置</el-dropdown-item>
          <el-dropdown-item divided command="loginout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </Div>
  </div>
</template>

<script>
import jsCookie from 'js-cookie';
import { mapMutations, mapState } from "vuex";
export default {
  name: "CommonHeader",
  computed: {
    ...mapState('tabAbout',['tabList']),
    ...mapState("navAbout", ["isCollapse"]),
  },
  methods: {
    ...mapMutations("navAbout", ["isColl"]),
    handleClick(command){
      if(command==='loginout'){
        jsCookie.remove("token")
        jsCookie.remove("menu")
        this.$router.push('/login')
      }
    }
  },
};
</script>

<style lang="less" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-breadcrumb {
  display: inline-block;
  margin-left: 20px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
</style>